<template>
  <section class="content-view">
    <h2 class="item-title">基础使用</h2>
    <Check :options="options"/>

    <h2 class="item-title">最多选择两项：{{ values }}</h2>
    <Check :options="options2" :max="2" @change="change"/>

    <h2 class="item-title">单选</h2>
    <Check :options="options2" :max="1"/>

    <h2 class="item-title">单独使用 Checkbox</h2>
    <Checkbox :option="options[0]"/>
    <Checkbox :option="options[1]"/>

  </section>
</template>

<script>
import { Check } from '&'
const { Checkbox } = Check

const options = [
  {
    label: 'A',
    value: 'A',
  },
  {
    label: 'B：默认选中',
    value: 'B',
    checked: true,
  },
  {
    label: 'C：禁用',
    value: 'C',
    checked: false,
    disabled: true,
  },
  {
    label: 'D：选中禁用',
    value: 'D',
    checked: true,
    disabled: true,
  },
]

export default {
  components: {
    Check,
    Checkbox,
  },
  data () {
    return {
      options,
      options2: ['A', 'B', 'C'],
      values: [],
    }
  },
  created () {},
  methods: {
    change (values, options) {
      this.values = values
      console.log(values, options)
    },
  },
}
</script>

<style lang="stylus" scoped>
</style>
